// 两种导出方式 
// export default 
// export 变量=导出的值
export default class Snake{
    constructor(selector){
        this.map = document.querySelector(selector);
        this.direction = 'right'; //默认蛇头在右边  
        this.snake = []; // 蛇  一节一节的放到数组中 
        this.createSnake();
        // for(let i=0;i<10;i++){
        //     this.move();
        // }


        

    }
    // 创建一节 
    createOne(){
        // 如果已经有头 创建身子
        var head = this.snake[0]; // 拿到this.snake第一个元素 
        // 如果有这个元素 说明有头了  
        if(head !== undefined){
            head.className = 'body'
        }
        //创建头
        const ele = document.createElement('div');
        ele.className = 'head'; // class赋值为head 背景才是头 
        // 将这个元素放到 this.snake这个数组的最前面 
        this.snake.unshift(ele);
        
        // 计算新头的定位位置 

        // 首先拿到原头的定位位置 
        const pos = {x:0,y:0}
        if(head !== undefined){
            //记录原头的位置 
            pos.x = head.offsetLeft;
            pos.y = head.offsetTop;

            switch(this.direction){
                case 'right':
                    pos.x += 20;
                    break
                case 'left':
                    pos.x -= 20;
                    break
                case 'top':
                    pos.y -= 20;
                    break
                case 'bottom':
                    pos.y += 20;
                    break
            }

            // 如果添加了一节 重新给蛇位置赋值 
           ele.style.left =  pos.x + 'px';
           ele.style.top =  pos.y + 'px';




        }

        // 将ele这个元素放到 地图上面 
        this.map.appendChild(ele);
    }

    // 创建一条蛇  初始化5节 

    createSnake(){
        for(let i=0;i<5;i++){
            // 每次创建一节 
            this.createOne();
        }

        // console.log('我是创建蛇的方法',this.snake);

    }


    // 往前移动  
    move(){
        // 每次移除数组的最后一项  然后再创建一个新头  
        const body = this.snake.pop();
        // pop方法返回的是删除的哪个元素

        // console.log('我是移动方法',this.snake);
        // console.log(body);
        body.remove();

        // 从页面上删除  
        // 父节点.removeChild(子节点)
        // 子节点.remove() ; 自己把自己干掉
        this.createOne();
        // console.log('我是移动方法2',this.snake);


    }

    // 是否吃到了食物  返回值 true 或者false
    // 需要拿到食物的坐标 
    // 蛇头的坐标和食物的坐标如果重叠 返回true 
    // 否则返回false
    isEat(foodX,foodY){
        var head = this.snake[0];//拿到蛇头 
        //head.offsetLeft 蛇头偏移量 距离定位父级的左边的距离
        //head.offsetTop 蛇头偏移量 距离定位父级的上边的距离

        if( head.offsetLeft  === foodX && head.offsetTop   === foodY){
            return true
        }

        return false 
    }


    // 如果isEat 是true 那么重新渲染一个新食物 

    // 蛇是否出界 
    // 结果 true或者false 
    isDie(){
        var head = this.snake[0];//拿到蛇头 
        // 如果 蛇头offsetLeft 小于0 
        //如果 蛇头offsetTop 小于0    
        // 蛇头offsetLeft 大于等于 可视化窗口的宽度
        // 蛇头offsetTop 大于等于 可视化窗口高度

        if(head.offsetLeft<0 || 
            head.offsetTop<0 || 
            head.offsetLeft>=this.map.clientWidth || 
             head.offsetTop>=this.map.clientHeight
        ){
            return true;
        }

        return false;
        
    }


    
}               